import React from "react"
import { 
  // Button, 
  Input 
} from 'antd'
import styles from './Blast.module.scss'

const formSubmit = function (url, method, jsonData, targetType) {
  let dlform = document.createElement('form');
  dlform.style = "display:none;";
  dlform.method = method;
  dlform.action = url;
  dlform.target = targetType
  let json = jsonData;
  for (let i = 0, l = json.length; i < l; i++) {
    for (let key in json[i]) {
      let hdnFilePath = document.createElement('input');
      hdnFilePath.type = 'hidden';
      hdnFilePath.name = key;
      hdnFilePath.value = json[i][key];
      dlform.appendChild(hdnFilePath);
    }
  }
  document.body.appendChild(dlform);
  dlform.submit();
  document.body.removeChild(dlform);
}

const Blast = (props) => {
  const { sequence } = props.sequenceData
  const clickSubmit = (type, seqVal) => {
    let url = 'https://blast.ncbi.nlm.nih.gov/Blast.cgi';	//请求路径
    let method = "POST";	//请求类型
    let jsonData = [];	//构建json
    let targetType = "_blank";	//在当前页面打开
    if (!seqVal) {
			jsonData.push({
        "PROGRAM": type,
        "PAGE_TYPE": "BlastSearch",
        "QUERY": sequence,
      });	//将传参放入json中
    } else {
			jsonData.push({
        "PROGRAM": type,
        "PAGE_TYPE": "BlastSearch",
        "BLAST_SPEC": "blast2seq",
        "QUERY": sequence,
        "SUBJECTS": seqVal,
      });	//将传参放入json中
    }
    formSubmit(url,method,jsonData,targetType)
  }
  const [seqVal, setSeqVal] = React.useState('')
  const onChange = (e) => {
    setSeqVal(e.target.value)
  };

  return(
    <div className={styles.blastBox} style={{background: props.darkMode ? 'transparent' : '#fefefe'}}>
      <div className={styles.content}>
        <p className={styles.title}>
          BLAST ( Basic Local Alignment Search Tool ) finds regions of similarity between biological sequences. Click on the buttons below to submit a BLAST 
          <br /> search to NCBI . The results wil appear in a new window .
        </p>
        <div className={styles.itemBox}>
          <h3 className={styles.itemTitle}>Nucleotide － Nucleotide BLAST ( BLASTN )</h3>
          <div className={styles.flexBox}>
            <p className={styles.itemText}>Search the sequencing result sequence against a nucleotide database :</p>
            <button 
              onClick={() => clickSubmit('blastn', null)}
              type="submit" className="bp3-button bp3-intent-primary">
                <span className="bp3-button-text">BLASTN</span>
            </button>
          </div>
        </div>
        <div className={styles.itemBox}>
          <h3 className={styles.itemTitle}>Translated Nucleotide - Protein BLAST ( BLASTX )</h3>
          <div className={styles.flexBox}>
            <p className={styles.itemText}>Translate the sequencing result sequence and search against a protein database :</p>
            <button 
              onClick={() => clickSubmit('blastx', null)}
              type="submit" className="bp3-button bp3-intent-primary">
                <span className="bp3-button-text">BLASTX</span>
            </button>
          </div>
        </div>
        <div className={styles.itemBox}>
          <h3 className={styles.itemTitle}>Sequence alignment using BLAST ( BLAST2 )</h3>
          <div className={styles.flexLastBox}>
            <div className={styles.itemTextBox}>
              <span className={styles.lastTitle}>Enter in a sequence to align against this plasmid sequencing result</span>
              <Input.TextArea className={styles.textArea}
                        onChange={onChange}
                        placeholder="..."
                        allowClear
                        autoSize={{minRows: 5, maxRows: 10}} />
            </div>
            <button 
              onClick={() => clickSubmit('blastn', seqVal)}
              type="submit" className="bp3-button bp3-intent-primary">
                <span className="bp3-button-text">BLAST2</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Blast